package com.echo.yixiaowu.main

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.lerp
import androidx.compose.ui.unit.sp
import com.echo.yixiaowu.R
import com.echo.yixiaowu.feature.main.home.HomeEvent
import com.echo.yixiaowu.feature.main.home.SortState
import com.echo.yixiaowu.main.ui.search.SearchBar

@Composable
@Preview
fun CollapsedHeader(
    modifier: Modifier = Modifier,
    sortState: SortState = SortState(),
    listState: LazyListState = rememberLazyListState(),
    mInitFirstMenuHeight: Dp = 60.dp,
    mInitSecondSearchHeight: Dp = 55.dp,
    onClickMenu: () -> Unit = {},
    onEvent: (HomeEvent) -> Unit = {},
    pagerState: PagerState = rememberPagerState(pageCount = { 3 })
) {
    val density = LocalDensity.current
    val mCurrentFirstMenuHeight by remember(listState) {
        derivedStateOf {
            if (listState.firstVisibleItemIndex == 0) {
                val scrollOffsetPx = listState.firstVisibleItemScrollOffset.toFloat()
                val initialHeightPx = with(density) { mInitFirstMenuHeight.toPx() }
                (initialHeightPx - scrollOffsetPx).coerceAtLeast(0f)
                    .let { with(density) { it.toDp() } }
            } else {
                0.dp
            }
        }
    }

    val mCurrentFirstMenuAlpha by remember(listState) {
        derivedStateOf {
            if (listState.firstVisibleItemIndex == 0) {
                val scrollOffsetPx = listState.firstVisibleItemScrollOffset.toFloat()
                val maxOffsetPx = with(density) { mInitFirstMenuHeight.toPx() }
                (1f - (scrollOffsetPx * 2f / maxOffsetPx)).coerceIn(0f, 1f)
            } else {
                0f
            }
        }
    }
    val animationProgress = (1f - (mCurrentFirstMenuHeight / mInitFirstMenuHeight)).coerceIn(0f, 1f)

    // 右侧透明度，从 1 渐变到 0
    val signInTextAlpha = 1f - animationProgress * 2f

    // 左侧图标透明度，从 0 渐变到 1
    val productIconAlpha = if (animationProgress == 1f) {
        animationProgress
    } else animationProgress - 0.3f


    val searchBarStartPadding =
        lerp(start = 0.dp, stop = 40.dp, fraction = animationProgress)

    val searchBarEndPadding = lerp(
        start = 60.dp, stop = 0.dp, fraction = animationProgress
    )

    Box(
        modifier = modifier
            .fillMaxWidth()
            .padding(top = mCurrentFirstMenuHeight)
            .height(mInitSecondSearchHeight)
            .padding(horizontal = 15.dp), // 给整个黑色条一个左右内边距
        contentAlignment = Alignment.Center // 垂直居中
    ) {
        //左侧图标
        Icon(
            painter = painterResource(R.drawable.ic_notice),
            contentDescription = "productIcon",
            tint = Color.White,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .graphicsLayer(alpha = productIconAlpha)
                .clickable(enabled = animationProgress == 1f, onClick = {})
        )

        // 右侧图标
        Text(text = "签到",
            color = Color.White,
            fontSize = 16.sp,
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .padding(end = 8.dp)// 对齐到末尾
                .graphicsLayer(alpha = signInTextAlpha)
                .clickable {
                    // TODO: 弹框获得金币啥的
                })

        SearchBar(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.CenterStart) // 对齐到头部
                .padding(
                    start = searchBarStartPadding, end = searchBarEndPadding
                )
        )
    }
    Header(
        modifier = modifier,
        mCurrentFirstMenuHeight,
        mCurrentFirstMenuAlpha,
        onClickMenu,
        pagerState = pagerState,
        onClickHeader = { id -> onEvent(HomeEvent.OnItemSelected(id)) },
        sortState = sortState
    )
}